<template>
	<div>
		<top-nav bgColor="white" 
		title="我的工厂"  
		btnName="工厂管理"  
		:rightShow="true" 
		returnPath="index" 
		rightPath="factoryManage" 
		@rightDo="sendParams"></top-nav>
		<section style="height: 3.2rem;"></section>
		
		<section  v-for="item in factoryList">
		
			<section style="border-top: 2px solid #ecebeb;padding: 1.1rem 1rem 0.6rem 1rem;display: flex;flex-direction: row;"  >
					<section style="display: flex;justify-content: center;align-items: left;flex: 7;flex-direction: column;" @click="goToFactory(item)">
						<span style="color: #353535;text-align: left;font-size:1rem;margin-bottom: 0.3rem;">工厂名称：{{item.factoryname}}</span>
						<section style="display: flex;flex-direction: column;">
		
						<section class="card-strip" >
							<span>联系人：{{item.contacts}}</span>
						</section>
						<section class="card-strip" >
							<span>联系方式：{{item.phone}}</span>
						</section>
						<section class="card-strip" >
							<span>地址：{{item.adress}}</span>
						</section>
						
						</section>
					</section>
					
					
					<section style="flex: 2;">	
					</section>
					<section style="flex: 2;display: flex;" >
						<section @click="popSure(item.id)" class="Unbundling" >
							  解绑
						</section>
					</section>
				</section>
			</section>		

		<mu-dialog :open="isPop" title="提示" @close="close">
		           此操作将解除微信公众号与工厂账号的绑定, 是否解绑?
		    <mu-flat-button slot="actions" @click="close('cancel')" primary label="取消"/>
		    <mu-flat-button slot="actions" primary @click="close('sure')" label="确定"/>
		</mu-dialog>
	</div>
</template>

<script>
	 export default {
		 data(){
		 	return{
		 		factoryList: [],
//		        factoryName:'SB工厂',
//		        address:'山东济南高新区姚家',
//		        contacts:'薛冰',
//		        contactInfo:'15678886788',
		        path:{path:'factoryManage'},
		        isPop:false,
		        choiceId:''
			 }
		 },
		 mounted(){
		 	this.getServerList()
		 },
		 methods:{ 
			 goToFactory(item){
			 	let that=this
			 	that.$router.push(
			 	{path:item.router,
			 	name:item.router,
			 	//name:'demo2',
			 	 params: { 
			             factoryId:item.id,
			             factoryName:item.factoryName
			         }})
			 },
		 	getServerList(){
		 		let that=this
			 	that.axios.get(that.global.homeSrc+'/factoryUser/getFactoryList').then(function(response){
			 		console.info(response.data)
			 		that.factoryList=response.data.data
			 	}).catch(function(error){
			 		console.info(error)
			 	})
//			 	that.axios.get('/factory/getFactoryList').then(function(response){
//			 		console.info('123456')
//			 		console.info(response.data)
//			 	}).catch(function(error){
//			 		console.info(error)
//			 	})
		 	},	 		
		 	sendParams()
	 		{
	 		let that=this
	 		that.$router.push(
	 		{path:'factoryManage',
	 		name:'factoryManage',
			 params: { 
            }})
	 		},
	 		popSure(id){
	 			this.isPop=true
	 			this.choiceId=id
	 		},
		 	close(val){
		 		if(val=='sure'){
		 			let that=this
		 			that.axios.post(that.global.homeSrc+'/factoryUser/deleteFactoryUser',{
						'factoryId':that.choiceId
						}).then(function(response){
					 		console.info(response.data)
					 		window.location.reload()
					 	}).catch(function(error){
					 		console.info(error)
					 	})
		 			}
		 		this.isPop=false
		 	}
		 }
	  }
</script>

<style>
	 .card-strip{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0.2rem 0;
	}
	.circle{
	width: 0.5rem;	
	height: 0.5rem;
	border-radius: 50%;
	display: block;
	margin-right: 0.6rem;
	}
	.text {
	  font-size: 14px;
	}
	.Unbundling{
		 width: 100%;
		 height: 2rem;
		 border-radius: 3px;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 background-color: #f6f6f6;
		 color:#bbbbbb
	}
	.item {
	  margin-bottom: 18px;
	}
	.clearfix:before,
	.clearfix:after {
	  display: table;
	  content: "";
	}
	.clearfix:after {
	  clear: both
	}
	.box-card {
	  width: 480px;
	}
</style>